<template>
    <div class="wrap">
           <div class="top"> K 榜单 </div>     
           <p class="sortTitle"> <span style="color:red"> 日排行 </span>  {{ nowDay }}  </p>
           <div class="kklist">
                <div v-for="(item, index) in kklist" :key="index" class="ktv_item" > 
                    <span class="kk_sort"> {{ index+1 }} </span> 
                    <span class="kk_name"> {{ item.player }} </span> 
                    <p class="kk_score"> SCORE  <span class="score_num"> {{ item.score }} </span>
                        <span style="margin-left:5px; font-size: 16px;color: darkred;"> {{ item.song }} </span>
                    </p> 
                </div>
           </div>

           <p class="sortTitleAll"> <span style="color:red"> 总排行 </span>  </p>
           <div class="kklist">
                <div v-for="(item, index) in kklist_all" :key="index" class="ktv_item" > 
                    <span class="kk_sort"> {{ index+1 }} </span> 
                    <span class="kk_name"> {{ item.player }} </span> 
                    <p class="kk_score"> SCORE  <span class="score_num"> {{ item.score }} </span>
                        <span style="margin-left:5px; font-size: 16px;color: darkred;"> {{ item.song }} </span>
                    </p> 
                </div>
           </div>

    </div>



</template>

<script >
import { ref, onMounted, getCurrentInstance, inject } from 'vue';
import {useRouter, useRoute} from 'vue-router'
import moment from 'moment'
import { Dialog } from 'vant'


 export default { 
    setup(){
        let router = useRouter();
        let route = useRoute()
        const activeId = ref(1);
        const activeIndex = ref(0);
        const username = ref('');
        const password = ref('');
        const department = ref('')
        const user_score = ref('')
        const telphone = ref('')
        const kklist = ref([])
        const kklist_all = ref([])
        const nowDay = ref('')
    onMounted(async()=>{
                        console.log('index K歌 Rank')          
                        const db = cloud.database();  
                        const _ = db.command
                        const $ = db.command.aggregate;
                        let mmday = ( moment().format('YYYYMMDD') ) 
                        nowDay.value = mmday
                        let single_list = await db.collection('ksong').aggregate(  )
                            .match({
                                time: mmday
                                })
                            // .group({
                            //     _id: '$player',
                            //     sum: $.sum('$score'),
                            //     avg: $.avg('$score'),
                            //     song: ('$song')
                            // })
                            .sort({ score: -1 })
                            .limit(25)
                            .end(); 
                        let all_list = await db.collection('ksong').aggregate(  )                           
                            // .group({
                            //     _id: '$player',
                            //     // sum: $.sum('$score'),
                            //     // avg: $.avg('$score'),
                            //     // data: $.first('$$ROOT'),
                            //     master_data: $.push('$$ROOT')
                            // })    
                            //   .match({
                            //         score: _.gt(2000)
                            //     })               
                            .sort({ score: -1 })
                            .limit(25)
                            .end(); 
                        kklist.value = single_list.data
                        kklist_all.value = all_list.data
                        console.log('日排行', kklist, '总排行', kklist_all)
                    })
                const cloud = inject('$cloud')
                return {
                        router,
                        route ,
                        activeId ,
                        activeIndex ,
                        username ,
                        password,  
                        department, 
                        user_score ,
                        telphone ,
                        // items ,
                        // onSubmit
                        kklist,
                        nowDay,
                        kklist_all
                }
            }
  }




</script>

<style lang="scss">
    body {
        margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
    }
    .top{
        margin: 7px auto;
        margin-bottom: 16px;
        width: 100%;
        background: lightcyan;
        padding-bottom: 5px;
        padding-top: 5px;
        font-weight: bold;
        font-size: 17px;
    }
    .tree{
        height: 500px !important;
    }
    .titleSlot{
        color: white ;
        font-weight: bold;
        background-color: darkgoldenrod;
        padding: 5px;
        width: 20px;
        font-size: 20px;
    }
    .kklist{
        width: 95%;
        margin: 0px auto;

    }
    .wrap{
        background: #f7f8fa;
        height: 1000px;
    }

    .ktv_item{
        background-color: white;
        position: relative;
        height: 45px;
    }
    .kk_sort {
        position: absolute;
        left: 5px;
        top:5px;
        font-size: 29px;
        color: red;
        font-weight: bold;
    }
    .kk_name{
        font-size: large;
        color: darkred;
        font-weight: bold;
         position: absolute;
        left: 29px;
        top:14px;
    }
    .score_num{
        color: darkgoldenrod;
        font-size: 20px;        
    }
    .kk_score {
            position: absolute;
            left: 99px;
    }
    .sortTitle {
            position: relative;
            left: -100px;
            margin-bottom: 4px;
            top: -10px;
            font-weight: bold;
            font-size: 19px;
    }
    .sortTitleAll{
            position: relative;
            left: -130px;
            margin-bottom: 4px;
            top: -10px;
            font-weight: bold;
            font-size: 19px;   
    }
</style>